<template>
	<div class="mycart">
		<div class="title">
			<router-link to="/mobile/home">
				< </router-link>
					<h4>购物车</h4>
					<p></p>
		</div>
		<div class="body">
			<ul>
				<li v-for="(item,index) in cartList" :key="item.id">
					<router-link :to="`/mobile/bookdetail/${item.book.id}`" :key="item.id"
						v-if="(item.hot!=0 && index<6) ||(item.price!=0&&index<9)">
						<img class="pic" :src="`http://127.0.0.1/api/public/showimg/${item.book.pic}`" />
						<h3 v-if="item.num<10">剩余：{{item.num}}本</h3>
						<div>
							<h4>{{item.book.name}}</h4>
							<aside class="pri">
								<p>${{item.price*num}}</p>
							</aside>
						</div>

					</router-link>
					<aside class="tnum">
						<button @click="btn(0)">-</button>
						{{num}}
						<button @click="btn(1)">+</button>
					</aside>
				</li>
			</ul>
		</div>
		<div class="hot">
			<MobileHomeList proptitle="新书上市" :proplist='newslist'></MobileHomeList>
		</div>
	</div>
</template>

<script>
	import MobileHomeList from '@/components/mobile/MobileHomeList.vue'

	export default {
		name: 'MobileCart',
		components: {
			MobileHomeList,
		},
		data() {
			return {
				num: 1,
				cartList: [],
				newslist: [],
				user: [],
				token: window.localStorage.getItem('token')
			}
		},
		computed: {},
		methods: {
			btn(type) {
				switch (type) {
					case 0:
						if (this.num > 1) {
							this.num--;
						}
						break;
					case 1:
						this.num++;
						break;
				}
			},
			findNew() {
				console.log('wryyynewww');
				this.$get("/api/public/findHot/1/4").then((resp) => {
					console.log(resp.data);
					console.log(resp.data.data);
					this.bannerlist = resp.data.data;
					this.newslist = resp.data.data;
					console.log(this.bannerlist);
				})
			},
			findcart() {
				this.$get('/api/fore/cart/findMyCarts').then((resp) => {
					console.log(resp.data);
					this.cartList = resp.data.data;
					console.log(this.cartList);
				})
			},
			getUser() {
				this.$get('/api/user/info').then((resp) => {
					console.log(resp.data);
					this.user = resp.data.data;
					console.log(this.user);
				})
				if (this.user == []) {
					this.$router.push("/mobilelogin")
				}
			}
		},
		mounted() {
			this.getUser();
			this.findNew();
			this.findcart();
		}
	}
</script>

<style scoped>
	.mycart {
		background-color: #393d49;
	}

	a {
		text-decoration: none;
	}

	.title a {
		color: white;
	}

	.title {
		background-color: #282b33;
		border-bottom: 1px white solid;
		margin-top: 0.7rem;
		width: 100%;
		height: 3rem;
		line-height: 3rem;
		display: flex;
		color: white;
		text-align: center;
		justify-content: space-around;
		z-index: 10;
		top: 0;
	}

	.body {
		display: flex;
		margin: 1rem auto;
		width: 80%;
		border-radius: 0.5rem;

	}

	img {
		width: 4rem;
		height: 5rem;
	}

	.body a {
		display: flex;
	}

	.body ul li p {}

	.body li {

		border: rgba(236, 245, 233, 0.8) 1rem solid;
		color: #0cada0;
		margin-top: 1rem;
		display: flex;
		align-items: center;
		background-color: rgba(236, 245, 233, 1.0);
		border-radius: 1.2rem;
		height: 6rem;
	}

	.body img {}

	.body h3 {
		color: white;
		margin-top: 3.5rem;
		width: 4rem;
		height: 0.5rem;
		font-size: 0.8rem;
		position: absolute;
		background-color: rgba(159, 172, 111, 0.6);
		padding: 0.5rem 0;
		text-align: center;
		line-height: 0.5rem;
		font-weight: normal;
		/* 中文强制不换行 */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.body h4 {
		margin-left: 1rem;
	}

	.body {
		justify-content: center;
	}

	ul {
		list-style: none;
	}

	.div {
		width: 72%;
	}

	.hot {
		margin-top: 2rem;
		border-top: white 1px solid;
	}

	.pri {
		font-weight: bold;
		color: #f35921;
		margin-left: 12px;
		margin-top: 1.2rem;
	}

	.btn {
		display: flex;
		margin-right: 1rem;
	}

	.btn input {
		height: 2rem;
		font-size: 1.2rem;
		margin-top: 0.5rem;
		background-color: rgba(195, 209, 135, 0.6);
		border: none;
	}

	.tnum {
		display: flex;
		margin-top: 3rem;
	}

	.tnum button {
		border: none;
		background-color: rgba(159, 172, 111, 0.4);
		width: 1.7rem;
	}
</style>